<template>
	<view class="wrap">
		<view class="container">
			<view class="container_top">
				<image class="bg_pic" src="../../static/movieParticulars/bg.png" mode=""></image>
				<view class="describe">
					<image class="container_pic" :src="moviesData.img"></image>
					<view class="container_describe">
						<text>{{moviesData.nm}}</text>
						<text>{{moviesData.cat}}</text>
						<text>{{moviesData.pubDesc}}</text>
					</view>
				</view>
			</view>
			<view class="container_middle">
				<!-- 电影评分 -->
				<view class="grade">
					<uni-section title="猫眼口碑" type="line" padding>
						<text class="score">{{moviesData.sc}}</text>
						<uni-rate :readonly="true" allow-half :value="moviesData.sc" />
					</uni-section>
				</view>
				<!-- 剧照 -->
				<view class="container_text">
					<uni-section title="剧照" type="line" padding></uni-section>
					<!-- 视频 -->
					<view class="video">
						<video :src="moviesData.videourl" controls autoplay></video>
					</view>
				</view>
				<!-- 电影介绍 -->
				<view class="container_text">
					<uni-section title="剧情简介" type="line" padding></uni-section>
					
					<view class="">
						<text>{{moviesData.dra}}</text>
					</view>
					
				</view>
				<!-- 演职人员 -->
				<view class="container_text">
					<uni-section title="演职人员" type="line" padding></uni-section>
					<text>导演：{{moviesData.dir}}</text>
					<text>主演：{{moviesData.star}}</text>
					<text>{{moviesData.videoName}}</text>
				</view>
				<!-- 轮播图 -->
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(url,index) in imgList" :key="index">
							<image @click="imgMagnify(url)" :src="url"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.movieId = option.id;
		},
		async mounted() {
			await uni.request({
				url: `https://m.maoyan.com/ajax/detailmovie?movieId=${this.movieId}`,
				method: 'GET',
				success: (res) => {
					this.moviesData = res.data.detailMovie;
					const {
						photos
					} = res.data.detailMovie;
					if (photos.lenght > 5) {
						this.imgList = photos.splice(0, 4);
						return
					}
					this.imgList = photos;
				}
			})
		},
		data() {
			return {
				movieId: "",
				rateValue: 3.5,
				moviesData: {},
				imgList: [],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},
		methods: {
			/* 点击轮播图 */
			imgMagnify(url) {
				uni.previewImage({
					urls: this.imgList,
					current: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		.container {
			.container_top {

				.bg_pic {
					position: relative;
					width: 100%;
					height: 460rpx;
					top: 0;
					left: 0;
					z-index: -9;
				}

				.describe {
					display: flex;
					top: 0;
					position: absolute;
					width: 100%;

					.container_pic {
						border: 10rpx solid white;
						width: 42%;
						margin-top: 40rpx;
						margin-left: 40rpx;
					}

					.container_describe {
						color: white;
						width: 40%;
						margin-top: 40rpx;
						margin-left: 40rpx;

						text:first-child {
							margin-top: 0rpx;
							font-weight: 900;
							font-size: 50rpx;
						}

						text:nth-child(2) {
							font-weight: 500;
							font-size: 36rpx;
						}

						text {
							margin-top: 15rpx;
							display: block;
						}
					}
				}
			}

			.container_middle {
				margin-top: 50rpx;

				.grade {
					display: flex;

					.score {
						font-size: 50rpx;
						color: #66CDAA;
					}
				}

				.container_text {
					text {
						display: block;
					}
				}

				.uni-margin-wrap {
					width: 100%;
					height: 450rpx;
				}

				.swiper {
					height: 450rpx;

					image {
						width: 100%;
						height: 450rpx;
					}
				}

				.video {
					width: 100%;

					video {
						width: 100%;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>